<template>
    <div class="my-seat">
         <circle-box :circleList="circleList"></circle-box>
         <!-- <div class="search-box" @click="search">筛选</div> -->
         <!-- <mt-popup v-model="popupVisible" position="right" class="search-panel">
             <com-search :searchData="searchData" @closeSearch="closeSearch" @changeDefault="changeDefault" @searchValue="searchValue"></com-search>
        </mt-popup> -->
    </div>
</template>
<script>
import circleBox from './seatBox.vue';
import comSearch from '../../../components/comSearch';
import { post } from '../../../../util/http.js'
import { Toast } from 'mint-ui'
export default {
    components: {
        circleBox,
        comSearch
    },
    data () {
        return {
            searchData: [{
                default: [],
                name: '请选择当前阶段',
                info: [{
                    label: '内购期',
                    value:4,
                }, {
                    label: '内购发行期',
                    value: 5,
                },{
                    label: '申购期',
                    value: 1,
                }, {
                    label: '正式发行期',
                    value: 0,
                }]
            },{
                default: [],
                name: '请选择买入阶段',
                info: [{
                    label: '内购期',
                    value: 1,
                }, {
                    label: '内购发行期',
                    value: 2,
                },{
                    label: '申购期',
                    value: 3,
                }]
            }],
            popupVisible: false,
            circleList: [],
            pageNum: 1,
            haveAll: true
        }
    },
    mounted() {
        this.$nextTick(() => {
              this.getSeat(this.pageNum)
              window.onscroll = function () {
                console.log(1)
                var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
                var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
                if (scrollT >= scrollH - clientH && this.haveAll) {
                    this.pageNum++
                    this.getSeat(this.pageNum)
                }
            }.bind(this)
          
        })
    },
    methods: {
        getSeat(pageNum) {
            let info = JSON.parse(window.localStorage.getItem('dongHang_data'))
            post('http://dlsapi.rz158.com/circle/selectMySeat', {
                agentId: info.agentId,
                page: this.pageNum,
                pageSize: 10,
                status: this.searchData[1].default.join(),
                currentStatus:  this.searchData[0].default.join()
            }).then(res => {
                if(res.code == 0) {
                    if (res.t.length == 0) {
                        this.haveAll = false
                    } else {
                        this.circleList = this.circleList.concat(res.t)
                    }
                } else {
                    Toast({
                        message: res.message,
                        duration: 1000
                    })
                }
            })
        },
        search() {
            this.popupVisible = true
        },
        searchValue(){
            this.pageNum = 1
            this.popupVisible = false
            this.searchMethods(this.pageNum)
        },
        searchMethods(pageNum) {
             let info = JSON.parse(window.localStorage.getItem('dongHang_data'))
             post('http://dlsapi.rz158.com/circle/selectMySeat', {
                agentId: info.agentId,
                page:  this.pageNum,
                pageSize: 100,
                status: this.searchData[1].default.join(),
                currentStatus:  this.searchData[0].default.join()
            }).then(res => {
                if(res.code == 0) {
                   this.circleList = res.t
                } else {
                    Toast({
                        message: res.message,
                        duration: 1000
                    })
                }
            })
        },
        closeSearch() {
            this.popupVisible = false
        },
        changeDefault(obj) {
            if (this.searchData[obj.index].default.indexOf(obj.value) == -1) {
                this.searchData[obj.index].default.push(obj.value)
            } else {
                let index = this.searchData[obj.index].default.indexOf(obj.value)
                this.searchData[obj.index].default.splice(index, 1)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.search-box{
    position: fixed;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border-radius: 100%;
    bottom: .5rem;
    right: .5rem;
    color:#fff;
    font-size: .3rem;
    background: #29abae;
}
.search-panel{
    width: 6.6rem;
    height: 100%;
}
</style>
